{% extends "staff/base.html" %}
{% import 'staff/_formhelpers.html' as forms with context %}

{% block title %} Create Assignment - {{ current_course.display_name_with_semester }}{% endblock %}

{% block main %}
  <section class="content-header">
      <h1>
        Create Assignment
        <small id="course-offering">{{ current_course.offering }}</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url_for("admin.course", cid=current_course.id) }}">
            <i class="fa fa-university"></i> {{ current_course.offering }}
        </a></li>
        <li><a href="{{ url_for('.course_assignments', cid=current_course.id) }}">
          <i class="fa fa-list"></i> Assignments</a>
        </li>
        <li class="active hidden-xs"><a href="#"><i class="fa fa-plus"></i> Create Assignment</a></li>
      </ol>
  </section>

  <section class="content">

    {% include 'alerts.html' %}
    <div class="row">
      <div class="col-md-12">
        <!-- Default box -->
          <div class="box">
            <div class="box-body">
              {% call forms.render_form_bare(form, action_url="", class_='form new-assign-form wizard') %}
                <h3>Name</h3>
                <fieldset>
                  {{ forms.render_field(form.display_name, label_visible=true, placeholder='Hog',
                                        required="required", type='text', id="display-name") }}
                  {{ forms.render_field(form.name, label_visible=true, value=current_course.offering + '/',
                                        placeholder='cal/cs61a/fa16/hog', type='text', id="assignment-name") }}
                  {{ forms.render_field(form.max_group_size, label_visible=true, type='number', min='1', value='1') }}
                </fieldset>
                <h3>Deadlines</h3>
                <fieldset>
                    {{ forms.render_field(form.due_date, label_visible=true, value=utils.new_due_date(current_course), type='text', class_='form-control datetime-picker') }}
                    {{ forms.render_field(form.lock_date, label_visible=true, value=utils.new_lock_date(current_course), type='text', class_='form-control datetime-picker') }}
                </fieldset>
                <h3>Grading</h3>
                <fieldset>
                    {{ forms.render_checkbox_field(form.visible, label_visible=true) }}
                    {{ forms.render_field(form.autograding_key, label_visible=true, placeholder='5abc... (Optional)', type='text') }}
                    {{ forms.render_checkbox_field(form.continuous_autograding, label_visible=true) }}
                    {{ forms.render_checkbox_field(form.revisions_allowed, label_visible=true) }}
                    {{ forms.render_checkbox_field(form.uploads_enabled, label_visible=true) }}
                    {{ forms.render_field(form.upload_info, label_visible=true, placeholder='Upload the following files: test.py', type='text') }}
                </fieldset>
              {% endcall %}
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
  <!-- </body> do not close body in template-->
{% endblock %}

{% block page_js %}
<script>
var form = $(".new-assign-form").show();
form.steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex) {
        // Allways allow previous action even if the current form is not valid!
        if (currentIndex > newIndex)
        {
            return true;
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinished: function (event, currentIndex) {
        form.submit();
    }
})

var nameTweaked = false;
function registerDisplayName(courseOffering) {
    $('#display-name').on('change, keyup', debounce(function () {
        if (!nameTweaked) {
            displayName = $('#display-name').val().toLowerCase().split(' ').join('')
            $('#assignment-name').val(courseOffering + '/' + displayName)
        }
    }, 25))
    $('#assignment-name').keyup(function () {
        nameTweaked = true;
    })
}
registerDisplayName('{{ current_course.offering }}')
</script>
{% endblock %}
